<!-- 设备管理页 -->
<template>
  <div class="app-container">
    <main class="main-content">
      <div class="container">
        <header>
          <h1>设备管理系统</h1>
          <p class="subtitle">高效管理企业设备资产，确保生产运行顺畅，降低维护成本</p>
        </header>

        <div class="modules-container">
          <!-- 设备台账模块 -->
          <div class="module" @click="showNotification('进入设备台账模块')">
            <div class="module-header">
              <div>
                <i class="fas fa-server"></i>
                <span>设备台账</span>
              </div>
              <i class="fas fa-arrow-right"></i>
            </div>
            <div class="module-content">
              <p class="module-description">
                设备台账模块用于记录设备的基本信息、购置日期等，方便企业进行资产管理。
              </p>

              <div class="module-features">
                <ul class="feature-list">
                  <li><i class="fas fa-check-circle"></i> 设备基本信息管理</li>
                  <li><i class="fas fa-check-circle"></i> 购置日期与使用状态跟踪</li>
                  <li><i class="fas fa-check-circle"></i> 设备价值与折旧计算</li>
                  <li><i class="fas fa-check-circle"></i> 设备分类与编号系统</li>
                </ul>
              </div>

              <div class="stats">
                <div class="stat-item">
                  <div class="stat-value">{{ devices.length }}</div>
                  <div class="stat-label">总设备数</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ normalDeviceRate }}%</div>
                  <div class="stat-label">正常运行</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">¥{{ totalDeviceValue }}</div>
                  <div class="stat-label">资产总值</div>
                </div>
              </div>

              <div class="action-buttons">
                <button class="btn btn-outline" @click.stop="showDeviceList">查看详情</button>
                <button class="btn btn-primary" @click.stop="showAddDeviceForm">添加设备</button>
              </div>
            </div>
          </div>

          <!-- 备件台账模块 -->
          <div class="module" @click="showNotification('进入备件台账模块')">
            <div class="module-header">
              <div>
                <i class="fas fa-boxes"></i>
                <span>备件台账</span>
              </div>
              <i class="fas fa-arrow-right"></i>
            </div>
            <div class="module-content">
              <p class="module-description">
                备件台账模块用于管理设备的备件库存，确保备件供应充足，减少设备故障对生产的影响。
              </p>

              <div class="module-features">
                <ul class="feature-list">
                  <li><i class="fas fa-check-circle"></i> 备件库存实时监控</li>
                  <li><i class="fas fa-check-circle"></i> 库存预警与自动补货</li>
                  <li><i class="fas fa-check-circle"></i> 备件使用记录追踪</li>
                  <li><i class="fas fa-check-circle"></i> 供应商管理</li>
                </ul>
              </div>

              <div class="stats">
                <div class="stat-item">
                  <div class="stat-value">{{ parts.length }}</div>
                  <div class="stat-label">备件种类</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ sufficientRate }}%</div>
                  <div class="stat-label">库存充足率</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">{{ replenishItems }}</div>
                  <div class="stat-label">待补货项</div>
                </div>
              </div>

              <div class="action-buttons">
                <button class="btn btn-outline" @click.stop="showPartsInventory">库存查询</button>
                <button class="btn btn-primary" @click.stop="showAddPartForm">入库管理</button>
              </div>
            </div>
          </div>

          <!-- 设备维修/保养模块 -->
          <div class="module" @click="showNotification('进入设备维修/保养模块')">
            <div class="module-header">
              <div>
                <i class="fas fa-tools"></i>
                <span>设备维修/保养</span>
              </div>
              <i class="fas fa-arrow-right"></i>
            </div>
            <div class="module-content">
              <p class="module-description">
                对目前运行设备进行对应的维修保养相关操作，每次的维修保养记录将会关联到设备台账上，可以预览当前设备所有的维修保养信息。
              </p>

              <div class="module-features">
                <ul class="feature-list">
                  <li><i class="fas fa-check-circle"></i> 维修工单管理</li>
                  <li><i class="fas fa-check-circle"></i> 保养计划制定</li>
                  <li><i class="fas fa-check-circle"></i> 历史记录追踪</li>
                  <li><i class="fas fa-check-circle"></i> 维修成本分析</li>
                </ul>
              </div>

              <div class="stats">
                <div class="stat-item">
                  <div class="stat-value">{{ pendingOrders }}</div>
                  <div class="stat-label">待处理工单</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">5</div>
                  <div class="stat-label">本周保养计划</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">92%</div>
                  <div class="stat-label">按时完成率</div>
                </div>
              </div>

              <div class="action-buttons">
                <button class="btn btn-outline" @click.stop="showMaintenanceOrders">工单列表</button>
                <button class="btn btn-primary" @click.stop="showCreateOrderForm">新建工单</button>
              </div>
            </div>
          </div>

          <!-- 设备预警信息模块 -->
          <div class="module" @click="showNotification('进入设备预警信息模块')">
            <div class="module-header">
              <div>
                <i class="fas fa-bell"></i>
                <span>设备预警信息</span>
              </div>
              <i class="fas fa-arrow-right"></i>
            </div>
            <div class="module-content">
              <p class="module-description">
                设定设备定时维护时间，在维护时间即将到期时，以APP消息的方式推送给制定责任人。
              </p>

              <div class="module-features">
                <ul class="feature-list">
                  <li><i class="fas fa-check-circle"></i> 自定义预警规则</li>
                  <li><i class="fas fa-check-circle"></i> 多方式消息推送</li>
                  <li><i class="fas fa-check-circle"></i> 责任人管理</li>
                  <li><i class="fas fa-check-circle"></i> 预警历史记录</li>
                </ul>
              </div>

              <div class="stats">
                <div class="stat-item">
                  <div class="stat-value">7</div>
                  <div class="stat-label">待处理预警</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">28</div>
                  <div class="stat-label">本月已处理</div>
                </div>
                <div class="stat-item">
                  <div class="stat-value">100%</div>
                  <div class="stat-label">消息送达率</div>
                </div>
              </div>

              <div class="action-buttons">
                <button class="btn btn-outline" @click.stop="showAlertSettings">预警设置</button>
                <button class="btn btn-primary" @click.stop="testNotification">推送测试</button>
              </div>
            </div>
          </div>
        </div>

        <footer>
          <p>© 2025 设备管理系统 | 企业资产数字化管理解决方案 | 技术支持: 400-123-4567</p>
        </footer>
      </div>

      <!-- 通知组件 -->
      <div class="notification" :class="{ show: notification.show, error: notification.isError }">
        {{ notification.message }}
      </div>

      <!-- 模态框 -->
      <div class="modal-overlay" :class="{ active: modal.active }" @click="closeModal">
        <div class="modal" @click.stop>
          <div v-if="modal.content === 'deviceList'" class="modal-content">
            <div class="modal-header">
              <h2>设备列表</h2>
              <button class="modal-close" @click="closeModal">&times;</button>
            </div>
            <div class="modal-body">
              <div class="device-list">
                <div v-for="device in devices" :key="device.id" class="device-item">
                  <div class="device-info">
                    <h3>{{ device.name }}</h3>
                    <p>型号: {{ device.model }} | 类型: {{ device.type }}</p>
                    <p>购置日期: {{ device.purchaseDate }} | 价值: ¥{{ device.value }}</p>
                  </div>
                  <span class="device-status" :class="getDeviceStatusClass(device.status)">
                    {{ device.status }}
                  </span>
                </div>
              </div>
              <div class="form-actions">
                <button class="btn btn-primary" @click="showAddDeviceForm">添加设备</button>
              </div>
            </div>
          </div>

          <div v-else-if="modal.content === 'addDevice'" class="modal-content">
            <div class="modal-header">
              <h2>添加新设备</h2>
              <button class="modal-close" @click="closeModal">&times;</button>
            </div>
            <div class="modal-body">
              <form @submit.prevent="addDevice">
                <div class="form-group">
                  <label for="deviceName">设备名称</label>
                  <input type="text" id="deviceName" class="form-control" v-model="newDevice.name" required>
                </div>
                <div class="form-group">
                  <label for="deviceType">设备类型</label>
                  <select id="deviceType" class="form-control" v-model="newDevice.type" required>
                    <option value="">请选择类型</option>
                    <option value="生产设备">生产设备</option>
                    <option value="检测设备">检测设备</option>
                    <option value="办公设备">办公设备</option>
                    <option value="自动化设备">自动化设备</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="deviceModel">设备型号</label>
                  <input type="text" id="deviceModel" class="form-control" v-model="newDevice.model" required>
                </div>
                <div class="form-group">
                  <label for="deviceValue">设备价值 (¥)</label>
                  <input type="number" id="deviceValue" class="form-control" v-model="newDevice.value" required>
                </div>
                <div class="form-group">
                  <label for="purchaseDate">购置日期</label>
                  <input type="date" id="purchaseDate" class="form-control" v-model="newDevice.purchaseDate" required>
                </div>
                <div class="form-group">
                  <label for="deviceStatus">设备状态</label>
                  <select id="deviceStatus" class="form-control" v-model="newDevice.status" required>
                    <option value="正常">正常</option>
                    <option value="警告">警告</option>
                    <option value="故障">故障</option>
                  </select>
                </div>
                <div class="form-actions">
                  <button type="button" class="btn btn-outline" @click="closeModal">取消</button>
                  <button type="submit" class="btn btn-primary">保存</button>
                </div>
              </form>
            </div>
          </div>

          <div v-else-if="modal.content === 'partsInventory'" class="modal-content">
            <div class="modal-header">
              <h2>备件库存</h2>
              <button class="modal-close" @click="closeModal">&times;</button>
            </div>
            <div class="modal-body">
              <div class="device-list">
                <div v-for="part in parts" :key="part.id" class="device-item">
                  <div class="device-info">
                    <h3>{{ part.name }}</h3>
                    <p>类型: {{ part.type }} | 供应商: {{ part.supplier }}</p>
                    <p>库存: {{ part.quantity }} | 最低库存: {{ part.minQuantity }}</p>
                  </div>
                  <span class="device-status" :class="getPartStatusClass(part)">
                    {{ part.quantity <= part.minQuantity ? '需补货' : '充足' }}
                  </span>
                </div>
              </div>
              <div class="form-actions">
                <button class="btn btn-primary" @click="showAddPartForm">添加备件</button>
              </div>
            </div>
          </div>

          <div v-else-if="modal.content === 'addPart'" class="modal-content">
            <div class="modal-header">
              <h2>添加新备件</h2>
              <button class="modal-close" @click="closeModal">&times;</button>
            </div>
            <div class="modal-body">
              <form @submit.prevent="addPart">
                <div class="form-group">
                  <label for="partName">备件名称</label>
                  <input type="text" id="partName" class="form-control" v-model="newPart.name" required>
                </div>
                <div class="form-group">
                  <label for="partType">备件类型</label>
                  <input type="text" id="partType" class="form-control" v-model="newPart.type" required>
                </div>
                <div class="form-group">
                  <label for="partQuantity">库存数量</label>
                  <input type="number" id="partQuantity" class="form-control" v-model.number="newPart.quantity" required>
                </div>
                <div class="form-group">
                  <label for="minQuantity">最低库存</label>
                  <input type="number" id="minQuantity" class="form-control" v-model.number="newPart.minQuantity" required>
                </div>
                <div class="form-group">
                  <label for="supplier">供应商</label>
                  <input type="text" id="supplier" class="form-control" v-model="newPart.supplier" required>
                </div>
                <div class="form-actions">
                  <button type="button" class="btn btn-outline" @click="closeModal">取消</button>
                  <button type="submit" class="btn btn-primary">保存</button>
                </div>
              </form>
            </div>
          </div>

          <div v-else-if="modal.content === 'maintenanceOrders'" class="modal-content">
            <div class="modal-header">
              <h2>维修工单列表</h2>
              <button class="modal-close" @click="closeModal">&times;</button>
            </div>
            <div class="modal-body">
              <div class="device-list">
                <div v-for="order in maintenanceOrders" :key="order.id" class="device-item">
                  <div class="device-info">
                    <h3>{{ order.device }} - {{ order.type }}</h3>
                    <p>日期: {{ order.date }} | 状态: {{ order.status }}</p>
                    <p>费用: ¥{{ order.cost }}</p>
                  </div>
                  <span class="device-status" :class="getOrderStatusClass(order.status)">
                    {{ order.status }}
                  </span>
                </div>
              </div>
              <div class="form-actions">
                <button class="btn btn-primary" @click="showCreateOrderForm">新建工单</button>
              </div>
            </div>
          </div>

          <div v-else-if="modal.content === 'createOrder'" class="modal-content">
            <div class="modal-header">
              <h2>创建维修工单</h2>
              <button class="modal-close" @click="closeModal">&times;</button>
            </div>
            <div class="modal-body">
              <form @submit.prevent="createOrder">
                <div class="form-group">
                  <label for="orderDevice">选择设备</label>
                  <select id="orderDevice" class="form-control" v-model="newOrder.device" required>
                    <option value="">请选择设备</option>
                    <option v-for="device in devices" :key="device.id" :value="device.name">
                      {{ device.name }}
                    </option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="orderType">工单类型</label>
                  <select id="orderType" class="form-control" v-model="newOrder.type" required>
                    <option value="维修">维修</option>
                    <option value="保养">保养</option>
                    <option value="检查">检查</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="orderDate">计划日期</label>
                  <input type="date" id="orderDate" class="form-control" v-model="newOrder.date" required>
                </div>
                <div class="form-group">
                  <label for="orderCost">预计费用 (¥)</label>
                  <input type="number" id="orderCost" class="form-control" v-model="newOrder.cost" required>
                </div>
                <div class="form-group">
                  <label for="orderStatus">工单状态</label>
                  <select id="orderStatus" class="form-control" v-model="newOrder.status" required>
                    <option value="已计划">已计划</option>
                    <option value="处理中">处理中</option>
                    <option value="已完成">已完成</option>
                  </select>
                </div>
                <div class="form-actions">
                  <button type="button" class="btn btn-outline" @click="closeModal">取消</button>
                  <button type="submit" class="btn btn-primary">保存</button>
                </div>
              </form>
            </div>
          </div>

          <div v-else-if="modal.content === 'alertSettings'" class="modal-content">
            <div class="modal-header">
              <h2>预警设置</h2>
              <button class="modal-close" @click="closeModal">&times;</button>
            </div>
            <div class="modal-body">
              <form @submit.prevent="saveAlertSettings">
                <div class="form-group">
                  <label for="alertDays">提前预警天数</label>
                  <input type="number" id="alertDays" class="form-control" v-model.number="alertSettings.days" min="1" max="30">
                </div>
                <div class="form-group">
                  <label for="alertMethod">预警方式</label>
                  <select id="alertMethod" class="form-control" v-model="alertSettings.method">
                    <option value="app">APP消息</option>
                    <option value="email">电子邮件</option>
                    <option value="sms">短信</option>
                    <option value="all">全部方式</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>
                    <input type="checkbox" id="enableSound" v-model="alertSettings.sound"> 启用声音提醒
                  </label>
                </div>
                <div class="form-group">
                  <label>
                    <input type="checkbox" id="enableVibration" v-model="alertSettings.vibration"> 启用振动提醒
                  </label>
                </div>
                <div class="form-actions">
                  <button type="button" class="btn btn-outline" @click="closeModal">取消</button>
                  <button type="submit" class="btn btn-primary">保存设置</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回到仪表盘的函数（可选）
const backToDashboard = () => {
  router.push('/')
}

// 通知状态
const notification = reactive({
  show: false,
  message: '',
  isError: false
})

// 模态框状态
const modal = reactive({
  active: false,
  content: ''
})

// 设备数据
const devices = ref([
  { id: 1, name: '数控机床', type: '生产设备', model: 'CNC-1000', status: '正常', value: '450000', purchaseDate: '2023-01-15' },
  { id: 2, name: '激光切割机', type: '生产设备', model: 'LC-200', status: '警告', value: '320000', purchaseDate: '2022-08-20' },
  { id: 3, name: '工业机器人', type: '自动化设备', model: 'IRB-6600', status: '正常', value: '280000', purchaseDate: '2023-03-10' }
])

// 备件数据
const parts = ref([
  { id: 1, name: '伺服电机', type: '电机类', quantity: 12, minQuantity: 5, supplier: '西门子' },
  { id: 2, name: '控制器', type: '控制类', quantity: 8, minQuantity: 3, supplier: 'ABB' },
  { id: 3, name: '传感器', type: '检测类', quantity: 25, minQuantity: 10, supplier: '欧姆龙' }
])

// 维修工单数据
const maintenanceOrders = ref([
  { id: 1, device: '数控机床', type: '保养', date: '2023-06-15', status: '已完成', cost: '1200' },
  { id: 2, device: '激光切割机', type: '维修', date: '2023-06-18', status: '处理中', cost: '3500' },
  { id: 3, device: '工业机器人', type: '保养', date: '2023-06-20', status: '已计划', cost: '800' }
])

// 新建设备表单数据
const newDevice = reactive({
  name: '',
  type: '',
  model: '',
  value: '',
  purchaseDate: '',
  status: '正常'
})

// 新建备件表单数据
const newPart = reactive({
  name: '',
  type: '',
  quantity: 0,
  minQuantity: 0,
  supplier: ''
})

// 新建工单表单数据
const newOrder = reactive({
  device: '',
  type: '维修',
  date: '',
  cost: '',
  status: '已计划'
})

// 预警设置数据
const alertSettings = reactive({
  days: 7,
  method: 'app',
  sound: true,
  vibration: true
})

// 计算属性
const pendingOrders = computed(() => {
  return maintenanceOrders.value.filter(order => order.status !== '已完成').length
})

const totalDeviceValue = computed(() => {
  return devices.value.reduce((sum, device) => sum + parseInt(device.value), 0).toLocaleString()
})

const normalDeviceRate = computed(() => {
  if (devices.value.length === 0) return 0
  const normalCount = devices.value.filter(device => device.status === '正常').length
  return Math.round((normalCount / devices.value.length) * 100)
})

const sufficientRate = computed(() => {
  if (parts.value.length === 0) return 0
  const sufficientCount = parts.value.filter(part => part.quantity > part.minQuantity).length
  return Math.round((sufficientCount / parts.value.length) * 100)
})

const replenishItems = computed(() => {
  return parts.value.filter(part => part.quantity <= part.minQuantity).length
})

// 方法
const showNotification = (message, isError = false) => {
  notification.message = message
  notification.isError = isError
  notification.show = true

  setTimeout(() => {
    notification.show = false
  }, 3000)
}

const openModal = (content) => {
  modal.content = content
  modal.active = true
}

const closeModal = () => {
  modal.active = false
  // 重置表单
  Object.assign(newDevice, {
    name: '',
    type: '',
    model: '',
    value: '',
    purchaseDate: '',
    status: '正常'
  })
  Object.assign(newPart, {
    name: '',
    type: '',
    quantity: 0,
    minQuantity: 0,
    supplier: ''
  })
  Object.assign(newOrder, {
    device: '',
    type: '维修',
    date: '',
    cost: '',
    status: '已计划'
  })
}

const showDeviceList = () => {
  openModal('deviceList')
}

const showAddDeviceForm = () => {
  openModal('addDevice')
}

const showPartsInventory = () => {
  openModal('partsInventory')
}

const showAddPartForm = () => {
  openModal('addPart')
}

const showMaintenanceOrders = () => {
  openModal('maintenanceOrders')
}

const showCreateOrderForm = () => {
  openModal('createOrder')
}

const showAlertSettings = () => {
  openModal('alertSettings')
}

const addDevice = () => {
  const device = {
    id: devices.value.length + 1,
    ...newDevice
  }
  devices.value.push(device)
  showNotification('设备添加成功!')
  closeModal()
}

const addPart = () => {
  const part = {
    id: parts.value.length + 1,
    ...newPart
  }
  parts.value.push(part)
  showNotification('备件添加成功!')
  closeModal()
}

const createOrder = () => {
  const order = {
    id: maintenanceOrders.value.length + 1,
    ...newOrder
  }
  maintenanceOrders.value.push(order)
  showNotification('工单创建成功!')
  closeModal()
}

const saveAlertSettings = () => {
  showNotification('预警设置已保存!')
  closeModal()
}

const testNotification = () => {
  if (window.Notification && Notification.permission === 'granted') {
    new Notification('设备管理系统测试', {
      body: '这是一条测试推送消息，表示您的预警系统工作正常。'
    })
    showNotification('测试推送消息已发送!')
  } else if (window.Notification && Notification.permission !== 'denied') {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        new Notification('设备管理系统测试', {
          body: '这是一条测试推送消息，表示您的预警系统工作正常。'
        })
        showNotification('测试推送消息已发送!')
      }
    })
  } else {
    showNotification('请在浏览器设置中允许通知', true)
  }
}

const getDeviceStatusClass = (status) => {
  switch (status) {
    case '正常': return 'status-normal'
    case '警告': return 'status-warning'
    case '故障': return 'status-error'
    default: return 'status-normal'
  }
}

const getPartStatusClass = (part) => {
  return part.quantity <= part.minQuantity ? 'status-error' : 'status-normal'
}

const getOrderStatusClass = (status) => {
  switch (status) {
    case '已完成': return 'status-normal'
    case '处理中': return 'status-warning'
    case '已计划': return 'status-error'
    default: return 'status-normal'
  }
}

// 生命周期钩子
onMounted(() => {
  // 检查浏览器通知权限
  if (window.Notification && Notification.permission === 'default') {
    Notification.requestPermission()
  }
})
</script>

<style scoped>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f0f4f8;
  color: #333;
  line-height: 1.6;
  padding: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  text-align: center;
  margin-bottom: 30px;
  padding: 25px;
  background: linear-gradient(135deg, #1a73e8, #6c5ce7);
  color: white;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 2.8rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.subtitle {
  font-size: 1.3rem;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
}

.modules-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.module {
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.module:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.module-header {
  background: linear-gradient(135deg, #2d87e6, #5a67d8);
  color: white;
  padding: 20px 30px;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.module-header i {
  font-size: 1.8rem;
}

.module-content {
  padding: 30px;
}

.module-description {
  color: #555;
  margin-bottom: 25px;
  font-size: 1.1rem;
  line-height: 1.7;
}

.module-features {
  margin-top: 25px;
}

.feature-list {
  list-style-type: none;
}

.feature-list li {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  transition: background-color 0.2s;
}

.feature-list li:hover {
  background-color: #f9f9f9;
}

.feature-list li:last-child {
  border-bottom: none;
}

.feature-list li i {
  color: #2d87e6;
  margin-right: 15px;
  font-size: 1.3rem;
}

.stats {
  display: flex;
  justify-content: space-around;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-top: 25px;
}

.stat-item {
  text-align: center;
  padding: 0 15px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #2d87e6;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 1rem;
  color: #666;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
  gap: 15px;
}

.btn {
  padding: 14px 28px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.05rem;
}

.btn-primary {
  background: linear-gradient(135deg, #2d87e6, #5a67d8);
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1a73e8, #4c51bf);
  box-shadow: 0 5px 15px rgba(41, 123, 245, 0.4);
}

.btn-outline {
  background: transparent;
  border: 2px solid #2d87e6;
  color: #2d87e6;
}

.btn-outline:hover {
  background-color: #2d87e6;
  color: white;
}

footer {
  text-align: center;
  margin-top: 60px;
  padding: 25px;
  color: #666;
  font-size: 1rem;
  border-top: 1px solid #eee;
}

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 25px;
  background: #4CAF50;
  color: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  transform: translateX(150%);
  transition: transform 0.5s ease;
  z-index: 1000;
}

.notification.error {
  background: #f44336;
}

.notification.show {
  transform: translateX(0);
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background-color: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-50px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal-header {
  padding: 20px 25px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #2d87e6, #5a67d8);
  color: white;
  border-radius: 12px 12px 0 0;
}

.modal-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

.modal-body {
  padding: 25px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #444;
}

.form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-control:focus {
  border-color: #2d87e6;
  outline: none;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 25px;
}

/* 设备列表样式 */
.device-list {
  margin-top: 20px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 8px;
}

.device-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.device-item:last-child {
  border-bottom: none;
}

.device-info h3 {
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.device-info p {
  color: #666;
  font-size: 0.9rem;
}

.device-status {
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-normal {
  background-color: #e6f7ee;
  color: #00a651;
}

.status-warning {
  background-color: #fef3e2;
  color: #ff9500;
}

.status-error {
  background-color: #feeaea;
  color: #ff3b30;
}

@media (max-width: 768px) {
  .modules-container {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 2.2rem;
  }

  .module-header {
    font-size: 1.3rem;
  }

  .action-buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .modal {
    width: 95%;
  }
}

/* 主界面样式 */
.app-container {
  display: flex;
  min-height: 100vh;
}

.main-content { 
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}
</style>